<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  header  -->
    <div class="header">
      <span class="popup-name">{{ currentNode.name }}</span>
      <a-icon class="close-btn" type="close" @click="$emit('done')" />
    </div>
    <!--  body  -->
    <div class="description">
      <div class="type-mode-radio">
        <a-radio-group v-model="mod" class="mode-radio-group">
          <a-radio :value="1" class="mode-radio">百分比</a-radio>
          <a-radio :value="2" class="mode-radio">数量</a-radio>
        </a-radio-group>
      </div>
      <div class="type-mode">
        <div class="etl-sampling">
          <a-col :span="16">
            <a-slider v-model="ratio" :step="1" :min="0" :max="100" />
          </a-col>
          <a-col :span="3">
            <a-input-number v-model="ratio" :min="0" :max="100" />
          </a-col>
          <a-col :span="1">&nbsp;%</a-col>
        </div>
        <div class="etl-sampling">
          <a-col :span="16">
            <a-input-number
              v-model="count"
              :min="1"
              :precision="0"
              :max="1000000"
            />
          </a-col>
        </div>
      </div>
    </div>
    <!--  footer  -->
    <div class="buttons">
      <div class="btn import-btn" @click="confirm">确定</div>
      <div class="btn cancel-btn" @click="$emit('done')">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'

@Component
export default class EtlSampling extends Vue {
  @Prop({
    type: Object,
    default: () => {
      return {}
    },
  })
  currentNode!: any
  // 模式
  public mod: number = 1
  // 数量
  public count: number = 0
  // 百分比
  public ratio: number = 0

  public created() {
    // 配置回显
    this.mod = this.currentNode.data.mod
    this.count = this.currentNode.data.count
    this.ratio = this.currentNode.data.ratio
  }

  public mounted() {
    // (document.querySelector('.overlay') as HTMLDivElement).addEventListener('click', this.closePopup)
  }

  public closePopup() {
    this.$emit('done')
  }

  public confirm() {
    this.$emit('confirm', {
      mod: this.mod,
      count: this.count,
      ratio: this.ratio,
    })
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/popup/setParams';

.set-params.window {
  height: 250px;
  width: 550px;
}
/* 内容 */
.description {
  display: flex;
  font-size: 16px;
  height: calc(100% - 109px);
  overflow-y: auto;
  padding: 12px 24px 0;

  .type-mode-radio {
    width: 20%;

    .mode-radio-group {
      .mode-radio {
        height: 32px;
        line-height: 32px;
        margin-bottom: 12px;
      }
    }
  }

  .type-mode {
    width: 80%;

    .etl-sampling {
      align-items: center;
      display: flex;
      height: 32px;
      margin-bottom: 12px;
      width: 100%;
    }
  }
}
</style>
